<template>
<div
    v-manfigy
    class="img-wrap"
    :style="{
      width:imgWidth + 'px',
      height:imgHeight + 'px'
    }"
>
  <a
      class="mag-wrap"
      :target="imgBlank ? '_blank' : '' "
      :style="{
        width: magWidth + 'px',
        height: magHeight + 'px'
      }"
      :href="link">
    <img
        class="mag-img"
        :src="imgUrl"
        :style="{
          width:imgWidth + 'px',
          height:imgHeight + 'px'
        }"
        :alt="imgAlt">
  </a>
  <img
      class="static-img"
      :src="imgUrl"
      :alt="imgAlt">
</div>
</template>

<script>
//导入带括号
import {manfigy} from "../directive";
export default {
  name:'Manfigy',
  directives:{
    manfigy
  },
  props:{
    imgWidth:{
      type:Number,
      default:375
    },
    imgHeight:{
      type:Number,
      default:500
    },
    magWidth:{
      type:Number,
      default:150
    },
    magHeight:{
      type:Number,
      default:150
    },
    imgBlank:{
      type:Boolean,
      default:false
    },
    imgUrl:String,
    imgAlt:String,
    link:String
  },
}
</script>

<style scoped lang="scss">
.img-wrap{
  position: relative;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px #999;
  .mag-wrap{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 0 0 3px #000;
    overflow: hidden;
    cursor: move;
    border-radius: 50%;
    &.show{
      display: block;
      transform: scale(1.5);
    }
    .mag-img{
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .static-img{
    width: 100%;
  }
}
</style>